﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Utilities/Assets</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Asset">Asset</a></h4>
			<div class="menu-item"><a href="#Asset:Asset-javascript">Asset.javascript</a></div>
			<div class="menu-item"><a href="#Asset:Asset-css">Asset.css</a></div>
			<div class="menu-item"><a href="#Asset:Asset-image">Asset.image</a></div>
			<div class="menu-item"><a href="#Asset:Asset-images">Asset.images</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Asset"><a href="#Asset">Object: Asset</a></h1>

<p class="description">Provides functions for the dynamic loading and management of JavaScript, CSS, and image files.</p>

<h2 id="Asset:Asset-javascript"><a href="#Asset:Asset-javascript">Asset Function: javascript</a></h2>

<p class="description">Injects a script tag into the head section of the document, pointing to the src specified.</p>

<h3>Syntax</h3>

<pre class="javascript"><span class="kw2">var</span> myScript = Asset.<span class="me1">javascript</span><span class="br0">(</span>source<span class="br0">[</span>, properties<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>source     - (<em>string</em>) The location of the JavaScript file to load.</li>
<li>properties - (<em>object</em>, optional) Additional attributes to be included into the script Element; this is the same as the second argument you might pass to including the Element constructor with the exception of Events (see note)

<ul>
<li>onLoad   - (<em>function</em>) A function that will be invoked when the JavaScript is loaded.</li>
<li>document - (<em>object</em>, defaults to <code>document</code>) The document which the JavaScript should be injected in.</li>
</ul>
</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>element</em>) A new script Element.</li>
</ul>
<h3>Examples</h3>

<pre class="javascript"><span class="kw2">var</span> myScript = Asset.<span class="me1">javascript</span><span class="br0">(</span><span class="st0">'/scripts/myScript.js'</span>, <span class="br0">{</span>
    id: <span class="st0">'myScript'</span>,
    <span class="kw3">onLoad</span>: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'myScript.js is loaded!'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Note</h3>

<ul>
<li>WARNING: DO NOT use addEvent for load on the returned element, give it as onLoad in the properties argument.</li>
</ul>
<h2 id="Asset:Asset-css"><a href="#Asset:Asset-css">Asset Function: css</a></h2>

<p class="description">Injects a css file in the page.</p>

<h3>Syntax</h3>

<pre class="javascript"><span class="kw2">var</span> myCSS = Asset.<span class="me1">css</span><span class="br0">(</span>source<span class="br0">[</span>, properties<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>source     - (<em>string</em>) The path of the CSS file.</li>
<li>properties - (<em>object</em>) Some additional attributes you might want to add to the link Element; this is the same as the second argument you might pass to including the Element constructor. For instance you might specify a title attribute or perhaps an id.

<ul>
<li>document - (<em>object</em>, defaults to <code>document</code>) The document which the link element should be injected in.</li>
</ul>
</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>element</em>) A new link Element.</li>
</ul>
<h3>Examples</h3>

<pre class="javascript"><span class="kw2">var</span> myCSS = Asset.<span class="me1">css</span><span class="br0">(</span><span class="st0">'/css/myStyle.css'</span>, <span class="br0">{</span>id: <span class="st0">'myStyle'</span>, title: <span class="st0">'myStyle'</span><span class="br0">}</span><span class="br0">)</span>;
</pre>

<h2 id="Asset:Asset-image"><a href="#Asset:Asset-image">Asset Function: image</a></h2>

<p class="description">Preloads an image and returns the img element.</p>

<h3>Syntax</h3>

<pre class="javascript"><span class="kw2">var</span> myImage = Asset.<span class="me1">image</span><span class="br0">(</span>source<span class="br0">[</span>, properties<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>source     - (<em>string</em>) The path of the image file.</li>
<li>properties - (<em>object</em>) Some additional attributes you might want to add to the img Element.

<ul>
<li>onLoad  - (<em>function</em>) A function that will be invoked when the image is loaded.</li>
<li>onError - (<em>function</em>) A function that will be invoked when the image failed loading.</li>
<li>onAbort - (<em>function</em>) A function what will be invoked when the loading is aborted.</li>
</ul>
</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>element</em>) A new HTML img Element.</li>
</ul>
<h3>Examples</h3>

<pre class="javascript"><span class="kw2">var</span> myImage = Asset.<span class="me1">image</span><span class="br0">(</span><span class="st0">'/images/myImage.png'</span>, <span class="br0">{</span>
    id: <span class="st0">'myImage'</span>,
    title: <span class="st0">'myImage'</span>,
    <span class="kw3">onLoad</span>: myFunction
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes</h3>

<ul>
<li>Does not inject the image into the page.</li>
<li>WARNING: DO NOT use addEvent for load/error/abort on the returned element, give them as onLoad/onError/onAbort in the properties argument.</li>
</ul>
<h2 id="Asset:Asset-images"><a href="#Asset:Asset-images">Asset Function: images</a></h2>

<p class="description">Preloads an array of images (as strings) and returns an array of img elements. does not inject them to the page.</p>

<h3>Syntax</h3>

<pre class="javascript"><span class="kw2">var</span> myImages = Asset.<span class="me1">images</span><span class="br0">(</span>source<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>sources - (<em>mixed</em>) An array or a string, of the paths of the image files.</li>
<li>options - (<em>object</em>, optional) See below.</li>
</ol>
<h3>Options</h3>

<ul>
<li>properties - (<em>object</em>) Some additional attributes for all the images (same as the second argument you might pass to <em>Asset.image</em>).</li>
</ul>
<h3>Events</h3>

<h4>complete</h4>

<ul>
<li>(<em>function</em>) Executes when all image files are loaded.</li>
</ul>
<h5>Signature</h5>

<pre class="javascript">onComplete<span class="br0">(</span><span class="br0">)</span>
</pre>

<h4>progress</h4>

<ul>
<li>(<em>function</em>) Executes when one image file is loaded.</li>
</ul>
<h5>Signature</h5>

<pre class="javascript">onProgress<span class="br0">(</span>counter, index, source<span class="br0">)</span>
</pre>

<h5>Arguments</h5>

<ol>
<li>counter - (<em>number</em>) The number of loaded images.</li>
<li>index   - (<em>number</em>) The index of the loaded image.</li>
<li>source  - (<em>string</em>) The path of the image file.</li>
</ol>
<h4>error</h4>

<ul>
<li>(<em>function</em>) Executes when one image file fails to load.</li>
</ul>
<h5>Signature</h5>

<pre class="javascript"><span class="kw3">onError</span><span class="br0">(</span>counter, index, source<span class="br0">)</span>
</pre>

<h5>Arguments</h5>

<ol>
<li>counter - (<em>number</em>) The number of errored images.</li>
<li>index   - (<em>number</em>) The index of the errored image.</li>
<li>source  - (<em>string</em>) The path of the image file.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>array</em>) An <a href="../../core/Element/Element.html#Elements">Elements</a> collection.</li>
</ul>
<h3>Examples</h3>

<pre class="javascript"><span class="kw2">var</span> myImages = Asset.<span class="me1">images</span><span class="br0">(</span><span class="br0">[</span><span class="st0">'/images/myImage.png'</span>, <span class="st0">'/images/myImage2.gif'</span><span class="br0">]</span>, <span class="br0">{</span>
    properties: <span class="br0">{</span>
        <span class="st0">'class'</span>: <span class="st0">'myImage'</span>,
        title: <span class="st0">'myImage'</span>
    <span class="br0">}</span>,
    onComplete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'All images loaded!'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
